<template>
  <el-dialog class="dialog" title="详细查询" :visible.sync="visible" width="50%" :close-on-click-modal="false">
    <el-form id="searchDetailForm" :model="detailSearchModel" ref="form" style="padding-top:10px" label-width="90px" :inline="true" size="mini">
      <el-row :gutter="20">
        <el-col :span="12" :offset="0">
          <el-form-item label="项目信息">
            <el-input v-model="queryParam.qry_project" placeholder="项目名称关键词或编号" @keyup.enter.native="doQuery"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12" :offset="0">
          <el-form-item label="项目经理">
            <el-input v-model="queryParam.qry_projectmanager" placeholder="工号或姓名" @keyup.enter.native="doQuery"> </el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12" :offset="0">
          <el-form-item label="项目级别">
            <el-select v-model="projectlevel" multiple clearable placeholder="请选择项目级别" style="width:100%" @change="doQueryConcatProjectLevel">
              <el-option v-for="item in codeModel.projectlevelList" :key="item.code" :label="item.name" :value="item.code"> </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12" :offset="0">
          <el-form-item label="项目周期">
            <el-input class="unitInput" v-model="queryParam.qry_bidcycle" placeholder="请输入项目周期" @keyup.enter.native="doQuery"
              ><template #append
                >天</template
              >
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :xl="12" :sm="24" :offset="0">
          <el-form-item label="立项日期" size="mini" style="width:100%">
            <el-date-picker style="width:100%" :editable="false" v-model="daterangeForFinishDate" type="daterange" range-separator="至" :picker-options="pickerOptions" start-placeholder="如：2021-01-01" end-placeholder="如：2021-01-01" value-format="yyyy-MM-dd" @change="daterangeForFinishDateChange"> </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :xl="12" :sm="24" :offset="0">
          <el-form-item label="结项日期" size="mini" style="width:100%;">
            <el-date-picker style="width:100%" :editable="false" v-model="daterangeForActualEndDate" type="daterange" range-separator="至" :picker-options="pickerOptions" start-placeholder="如：2021-01-01" end-placeholder="如：2021-01-01" value-format="yyyy-MM-dd" @change="daterangeForActualEndDateChange"> </el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12" :offset="0">
          <el-form-item label="Sponsor">
            <el-input v-model="queryParam.qry_sponsor" placeholder="姓名或工号" @keyup.enter.native="doQuery"> </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12" :offset="0">
          <el-form-item label="Owner">
            <el-input v-model="queryParam.qry_owner" placeholder="姓名或工号" @keyup.enter.native="doQuery"> </el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12" :offset="0">
          <el-form-item label="项目阶段">
            <el-select style="width:100%" v-model="projectstates" filterable clearable multiple collapse-tags placeholder="请选择项目阶段" @change="doQueryConcatProjectState">
              <el-option v-for="item in codeModel.projectstateList" :key="item.code" :label="item.name" :value="item.code"> </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12" :offset="0" v-show="doDisplayState">
          <el-form-item label="督办情况">
            <el-select v-model="supervisestate" placeholder="请选择督办情况" style="width: 100%" filterable clearable multiple collapse-tags @change="concatSuperviseState">
              <el-option v-for="item in codeModel.superviseStateList" :key="item.code" :label="item.name" :value="item.code" />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="3" :offset="16">
          <el-form-item label="">
            <el-button type="primary" size="mini" @click="detailSearchDoQuey">查询</el-button>
          </el-form-item>
        </el-col>
        <el-col :span="3">
          <el-form-item label="">
            <el-button type="primary" size="mini" @click="resetParam">重置</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </el-dialog>
</template>
<script>
/** 子组件 */
import { validateNull } from '@tapui/utils/validate'
/** 工具类 */
import { getAction, putAction, postAction, deleteAction } from '@tapui/utils/http'
import { filterObjectNull, rmbFormat } from '@tapui/utils/util'
export default {
  name: 'detailSearch',
  props: {
    codeModel: {
      type: Object
    },
    // 控制项目阶段筛选显示
    doDisplayState: {
      type: Boolean,
      default: true
    },
    projectLevel: {
      type: Array
    },
    createDepart: {
      type: Array
    },
    queryParams: {
      type: Object
    }
  },
  watch: {
    queryParam: function(oldV, newV) {
      this.$emit('update:queryParams', this.queryParam)
    }
  },
  computed: {
    projectlevel: function() {
      return this.projectLevel
    },
    createdepart() {
      return this.createDepart
    },
    queryParam: function() {
      return this.queryParams
    }
  },
  data() {
    return {
      supervisestate: [],
      visible: false,
      detailSearchModel: {},
      projectstates: [],
      sourcetype: [],
      daterangeForActualEndDate: '',
      daterangeForFinishDate: '',
      pickerOptions: {
        shortcuts: [
          {
            text: '本月',
            onClick(picker) {
              const date = new Date()
              const firstDay = new Date(date.getFullYear(), date.getMonth(), 1)
              picker.$emit('pick', [firstDay, new Date()])
            }
          },
          {
            text: '今年至今',
            onClick(picker) {
              const end = new Date()
              const start = new Date(new Date().getFullYear(), 0)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近六个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setMonth(start.getMonth() - 6)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近一年',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setMonth(start.getMonth() - 12)
              picker.$emit('pick', [start, end])
            }
          }
        ]
      }
    }
  },
  methods: {
    // 部门名称多选框
    doQueryConcatCreateDepart(data) {
      this.$emit('update:createDepart', data)
      if (data.length > 0) {
        this.queryParam.qry_createdepart = data
          .map((item) => {
            return "'" + item + "'"
          })
          .join(',')
      } else {
        this.queryParam.qry_createdepart = null
      }
    },
    // 督办情况多选框
    concatSuperviseState(data) {
      if (data.length > 0) {
        this.queryParam.qry_supervisestate = data
          .map((item) => {
            return item
          })
          .join(',')
      } else {
        this.queryParam.qry_supervisestate = null
      }
    },
    // 项目级别多选框
    doQueryConcatProjectLevel(data) {
      this.$emit('update:projectLevel', data)
      if (data.length > 0) {
        this.queryParam.qry_projectlevel = data
          .map((item) => {
            return "'" + item + "'"
          })
          .join(',')
      } else {
        this.queryParam.qry_projectlevel = null
      }
    },
    // 异常状态多选框
    doQueryConcatAbnormalState(data) {
      if (data.length > 0) {
        this.queryParam.qry_abnormalstate = data
          .map((item) => {
            return "'" + item + "'"
          })
          .join(',')
      } else {
        this.queryParam.qry_abnormalstate = null
      }
    },
    // 项目阶段多选框
    doQueryConcatProjectState(data) {
      if (data.length > 0) {
        this.queryParam.qry_projectstate = data
          .map((item) => {
            return "'" + item + "'"
          })
          .join(',')
      } else {
        this.queryParam.qry_projectstate = null
      }
    },
    // 重置详细查询条件（父组件调用）
    resetQueryParam() {
      // 清空所有查询条件
      this.projectstates = []
      this.sourcetype = []
      this.daterangeForActualEndDate = []
      this.daterangeForFinishDate = []
      this.supervisestate = []
    },
    // 重置详细查询条件（详细查询页重置按钮用）
    resetParam() {
      this.$emit('update:projectLevel', [])
      this.$emit('update:createDepart', [])
      // // 清空所有查询条件
      this.projectstates = []
      this.sourcetype = []
      this.daterangeForActualEndDate = []
      this.daterangeForFinishDate = []
      this.supervisestate = []
      this.$emit('resetQueryParam')
      this.visible = false
    },
    detailSearchDoQuey() {
      if (this.createdepart.length > 0) {
        this.queryParam.qry_createdepart = this.createdepart
          .map((item) => {
            return "'" + item + "'"
          })
          .join(',')
      } else {
        this.queryParam.qry_createdepart = null
      }
      // 督办情况多选框
      if (this.supervisestate.length > 0) {
        this.queryParam.qry_supervisestate = this.supervisestate
          .map((item) => {
            return item
          })
          .join(',')
      } else {
        this.queryParam.qry_supervisestate = null
      }
      // 处理项目级别多选框
      if (this.projectlevel.length > 0) {
        this.queryParam.qry_projectlevel = this.projectlevel
          .map((item) => {
            return "'" + item + "'"
          })
          .join(',')
      } else {
        delete this.queryParam.qry_projectlevel
      }
      // 处理项目阶段多选框
      if (this.projectstates.length > 0) {
        this.queryParam.qry_projectstate = this.projectstates
          .map((item) => {
            return "'" + item + "'"
          })
          .join(',')
      } else {
        delete this.queryParam.qry_projectstate
      }
      // 处理线索/机会点多选框
      if (this.sourcetype.length > 0) {
        this.queryParam.qry_sourcetype = this.sourcetype
          .map((item) => {
            return "'" + item + "'"
          })
          .join(',')
      } else {
        delete this.queryParam.qry_sourcetype
      }
      this.detailSearchVisible = false
      this.doQuery()
    },
    // 立项日期选择器确定事件
    daterangeForFinishDateChange(dateSelected) {
      if (dateSelected !== null && dateSelected !== undefined) {
        // 控制日期差不得超过一年
        var beginDateStamp = new Date(dateSelected[0]).getTime()
        var endDateStamp = new Date(dateSelected[1]).getTime()
        if (endDateStamp - beginDateStamp > 1000 * 60 * 60 * 24 * 366) {
          this.$tap.alert('立项时间差不能超过一年', 'warning')
          this.queryParam.startDateForFinisthDate = {}
          this.queryParam.endDaterFinisthDate = {}
          this.daterangeForFinishDate = []
          return
        }
        this.queryParam.startDateForFinisthDate = dateSelected[0]
        this.queryParam.endDaterFinisthDate = dateSelected[1]
      } else {
        this.queryParam.startDateForFinisthDate = null
        this.queryParam.endDaterFinisthDate = null
      }
    },
    // 结项日期选择器确定事件
    daterangeForActualEndDateChange(dateSelected) {
      if (dateSelected !== null && dateSelected !== undefined) {
        // 控制日期差不得超过一年
        var beginDateStamp = new Date(dateSelected[0]).getTime()
        var endDateStamp = new Date(dateSelected[1]).getTime()
        if (endDateStamp - beginDateStamp > 1000 * 60 * 60 * 24 * 366) {
          this.$tap.alert('结项时间差不能超过一年', 'warning')
          this.queryParam.startDateForActualEndDate = {}
          this.queryParam.endDateForActualEndDate = {}
          this.daterangeForActualEndDate = []
          return
        }
        this.queryParam.startDateForActualEndDate = dateSelected[0]
        this.queryParam.endDateForActualEndDate = dateSelected[1]
      } else {
        this.queryParam.startDateForActualEndDate = null
        this.queryParam.endDateForActualEndDate = null
      }
    },
    openDeatailSearchDialog() {
      this.visible = true
    },
    /** 执行查询 */
    doQuery() {
      this.visible = false
      this.$emit('upadateParam', this.queryParam)
      this.$emit('loadData', { currentPage: 1 })
    }
  }
}
</script>
<style lang="scss" scoped>
/deep/ .el-form-item__content {
  width: 70%;
}
/deep/ .el-form-item {
  width: 100%;
}
.dialog /deep/ .el-dialog__body {
  padding: 0 20px;
}
</style>
